<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border-collapse: collapse;
        }
        body{
            display:flex;
            flex-direction:column;
            align-items:center ;
        }
        td {
            width: 100px;
            height: 50px;
            text-align: center;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <h2>表单 Subtext for header</h2>
    </br>
    <span>姓名：<input type="text" name="name" placeholder="只能包含数组字母下划线,且数字不能开头,长度在8~16之间"></span>
    </br>
    <span>电话：<input type="text" name="phone" placeholder="输入你的电话号"></span>
    </br>
    <span>学历：<input type="text" name="educ" placeholder="输入你的学历"></span>
    </br>
    <span>年龄：<input type="text" name="age" placeholder="输入你年龄"></span>
    </br>
    <span>期望薪资：<input type="text" id="salary" placeholder="输入你年龄"></span>
    </br>
    <button class="">保存</button>
    <button class="">重置</button>
    <table>
        <thead>
            <tr>
                <td>姓名</td>
                <td>联系电话</td>
                <td>学历</td>
                <td>年龄</td>
                <td>期望薪资</td>
                <td>修改</td>
                <td>删除</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    /* <script>
        //定义数组 模拟数据库数据
        var arr = [
            {  name: '张三', phone: 12345678901, educ: '本科', age: 12, salary: '两万' },
            { name: '李四', phone: 12345678901, educ: '小学', age: 20, salary: '十万' },
            { name: '王五', phone: 12345678901, educ: '硕士', age: 99, salary: '一亿' },
        ];
        console.log(arr) ;
        
        //获取tbody标签对象
        let oTbody = document.querySelector('tbody');
        //调用函数 动态生成页面
        setPage();
        oTbody.addEventListener( 'click', function(event){
            if(event.target.getAttribute('name') === 'del'){
                if( !window.confirm('你确定删除吗'))
                return ;
                arr.splice(Number(event.target.getAttribute('index')),1) ;
                setPage() ;
            }
        })

        function setPage(){
            if(arr.length === 0){
                oTbody.innerHTML = '<tr><td colspan="6">没有匹配的数据</td></tr>';
                return ;
            }
            let str = '' ;
            arr.forEach(function(item,key){
                str += `
                    <tr>
                        <td>${item.name}</td>
                        <td>${item.phone}</td>
                        <td>${item.educ}</td>
                        <td>${item.age}</td>
                        <td>${item.salary}</td>
                        <td><button name="del" index="${key}">修改</button></td>
                        <td><button name="del" index="${key}">删除</button></td>
                    </tr>
                `;
            })
            oTbody.innerHTML = str ;
        }
        add.addEventListener('click',function(){
            let group = {
                id : arr.length,
                userName:item.name,
                sex:item.sex,
                age:item.age,
                city:item.addr
            }
        })
        arr.push(group)
        var tr = document.createElement('tr')
        tr.innerHTML = `
        <td>${item.name}</td>
                        <td>${item.name}</td>
                        <td>${item.phone}</td>
                        <td>${item.educ}</td>
                        <td>${item.age}</td>
                        <td>${item.salary}</td>
                        <td><button name="del" index="${key}">删除</button></td>
        `
        oTbody.append(tr)
    </script> */
</body>

</html>